<template>
  <div id="cars">
    <div class="search_box">
      <el-input
        v-model="searchContent.project_name"
        placeholder="项目名"
      ></el-input>
      <el-select v-model="searchContent.unincome" placeholder="是否结清">
        <el-option value="1" label="已结清"></el-option>
        <el-option value="2" label="未结清"></el-option>
      </el-select>
      <el-select v-model="searchContent.uninvoice" placeholder="是否全部开票">
        <el-option value="1" label="已全部开票"></el-option>
        <el-option value="2" label="未全部开票"></el-option>
      </el-select>
      <el-input v-model="searchContent.receivable" placeholder="收款单位">
      </el-input>
      <el-input v-model="searchContent.payable" placeholder="付款单位">
      </el-input>
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button @click="resetList">重置</el-button>
      <!-- <el-button type="primary" @click="printListData">导出数据</el-button> -->
    </div>
    <div class="export_box">
      <!-- <el-button type="primary" @click="addOne">新增</el-button> -->
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="h"
      border
      ref="table"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        prop="project_name"
        label="应收项目"
        align="center"
        width="200px"
      >
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="业务日期"
        align="center"
        width="120px"
        :formatter="timestampToTime"
      >
      </el-table-column>
      <el-table-column
        prop="abstract"
        label="业务摘要"
        align="center"
        width="250px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="total_price"
        label="应收金额"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">
          {{ Number(scope.row.total_price || 0).toFixed(4) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="income"
        label="已收金额"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">
          {{ Number(scope.row.income || 0).toFixed(4) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="unincome"
        label="欠收金额"
        align="center"
        width="100px"
        fixed="right"
      >
        <template slot-scope="scope">
          <span
            :style="{
              color:
                Number(scope.row.total_price || 0) -
                  Number(scope.row.income || 0) >
                0
                  ? 'red'
                  : '',
            }"
          >
            {{
              (
                Number(scope.row.total_price || 0) -
                Number(scope.row.income || 0)
              ).toFixed(4)
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="payable"
        label="付款单位"
        align="center"
        width="200px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="receivable"
        label="收款单位"
        align="center"
        width="200px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="invoicing"
        label="已开票金额"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="uninvoicing"
        label="剩余未开票"
        align="center"
        width="100px"
        fixed="right"
      >
        <template slot-scope="scope">
          <span
            :style="{
              color:
                Number(scope.row.total_price || 0) -
                  Number(scope.row.invoicing || 0) >
                0
                  ? 'red'
                  : '',
            }"
          >
            {{
              (
                Number(scope.row.total_price || 0) -
                Number(scope.row.invoicing || 0)
              ).toFixed(4)
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="paid_in"
        label="操作"
        align="center"
        width="250px"
        fixed="right"
      >
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="collectionVisible(scope.row)"
              >收款登记</el-button
            >
            <el-button type="text" @click="invoiceVisible(scope.row)"
              >销项发票登记</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_table">
      <span style="line-height: 35px; margin-right: 30px"
        >应收总计: <span>{{ price1.toFixed(4) }}</span></span
      >
      <span style="line-height: 35px; margin-right: 30px"
        >已收总计:
        <span style="color: green">{{ price2.toFixed(4) }}</span></span
      >
      <span style="line-height: 35px; margin-right: 30px"
        >欠收总计:
        <span style="color: red">{{ (price1 - price2).toFixed(4) }}</span></span
      >
      <span style="line-height: 35px; margin-right: 30px"
        >应开票总计: <span>{{ price1.toFixed(4) }}</span></span
      >
      <span style="line-height: 35px; margin-right: 30px"
        >已开票总计:
        <span style="color: green">{{ price3.toFixed(4) }}</span></span
      >
      <span style="line-height: 35px; margin-right: 30px"
        >未开票总计:
        <span style="color: red">{{ (price1 - price3).toFixed(4) }}</span></span
      >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchContent.total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="
        show_type == 1 ? '收款登记' : show_type == 2 ? '发票登记' : '应收编辑'
      "
      :visible.sync="visible"
      width="850px"
      :before-close="handleClose"
    >
      <el-form
        :inline="true"
        label-width="100px"
        :model="form"
        ref="ruleForm"
        :rules="rules"
      >
        <el-form-item label="应收项目" prop="code">
          <el-input v-model="form.project_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="付款客户" prop="customer_id">
          <el-input v-model="form.payable" disabled></el-input>
        </el-form-item>
        <el-form-item label="业务摘要" prop="abstract">
          <el-input
            v-model="form.abstract"
            type="textarea"
            :rows="3"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="欠收金额"
          prop="unincome"
          v-if="show_type == 1 || show_type == 3"
        >
          <el-input v-model="form.unincome" disabled></el-input>
        </el-form-item>

        <!-- <el-form-item
          label="欠收金额"
          prop="unincome"
          v-if="show_type == 3 || show_type == 0"
        >
          <el-input v-model="form.unincome" disabled></el-input>
        </el-form-item> -->
        <!-- <el-form-item
          label="账号"
          prop="abstract"
          v-if="show_type == 1 || show_type == 3"
        >
          <el-input
            v-model="form.account_info"
            type="textarea"
            :rows="1"
            disabled
          ></el-input>
        </el-form-item> -->
        <!-- 收款登记 -->
        <!-- <el-form-item
          label="总应收"
          prop="total_price"
          v-if="show_type == 1 || show_type == 3"
        >
          <el-input v-model="form.total_price" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="已收金额"
          prop="income"
          v-if="show_type == 1 || show_type == 3"
        >
          <el-input v-model="form.income" disabled></el-input>
        </el-form-item> -->
        <el-form-item
          label="收款账户"
          prop="account_id"
          v-if="show_type == 1 || show_type == 3"
        >
          <el-select
            style="width: 430px"
            v-model="form.account_id"
            @change="changeAccount"
          >
            <el-option
              v-for="item in accountList"
              :key="item.id"
              :value="item.id"
              :label="item.company + ' - ' + item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item
          label="收款日期"
          prop="create_time"
          v-if="show_type == 1 || show_type == 3"
        >
          <el-date-picker
            v-model="form.create_time"
            type="date"
            placeholder="选择日期"
            value-format="yyyy/MM/dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="收款金额"
          prop="income_price"
          v-if="show_type == 1 || show_type == 3"
        >
          <el-input
            v-model="form.income_price"
            type="number"
            @input="changeIncome"
          ></el-input>
        </el-form-item>

        <br />

        <el-form-item
          label="经手人"
          prop="handler"
          v-if="show_type == 1 || show_type == 3"
        >
          <el-input v-model="form.handler"></el-input>
        </el-form-item>
        <el-form-item
          label="收款备注"
          prop="income_remark"
          v-if="show_type == 1 || show_type == 3"
        >
          <el-input
            v-model="form.income_remark"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
        <!-- 开票 -->
        <!-- <el-form-item
          label="总开票金额"
          prop="total_price"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input v-model="form.total_price" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="已开票金额"
          prop="invoicing_price"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input v-model="form.invoicing" disabled></el-input>
        </el-form-item> -->
        <el-form-item
          label="未开票金额"
          prop="uninvoicing"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input v-model="form.uninvoicing" disabled></el-input>
        </el-form-item>
        <br />
        <el-form-item
          label="开票日期"
          prop="create_time"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-date-picker
            v-model="form.create_time"
            type="date"
            placeholder="选择日期"
            value-format="yyyy/MM/dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="开票金额"
          prop="invoicing_price"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input
            v-model="form.invoicing_price"
            @input="changeTaxrate(1)"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="税率"
          prop="taxrate"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input
            v-model="form.taxrate"
            @input="changeTaxrate(2)"
            type="number"
            ><template slot="append">%</template></el-input
          >
        </el-form-item>
        <el-form-item
          label="不含税金额"
          prop="excluding_tax"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input v-model="form.excluding_tax" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="税额"
          prop="tax_amount"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input v-model="form.tax_amount" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="发票类型"
          prop="invoice_type"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input v-model="form.invoice_type"></el-input>
        </el-form-item>
        <el-form-item
          label="发票交票日期"
          prop="invoice_date"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-date-picker
            v-model="form.invoice_date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy/MM/dd"
          >
          </el-date-picker>
        </el-form-item>
        <br />
        <el-form-item
          label="发票号码"
          prop="invoice_num"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input
            v-model="form.invoice_num"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="发票代码"
          prop="invoice_code"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input
            v-model="form.invoice_code"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="发票内容"
          prop="invoice_content"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input
            v-model="form.invoice_content"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="开票备注"
          prop="invoice_remark"
          v-if="show_type == 2 || show_type == 3"
        >
          <el-input
            v-model="form.invoice_remark"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB, editDB } from "@/db/indexdb";
import { searchTable } from "@/db/search";
import { printData } from "@/db/print";

export default {
  data() {
    return {
      activeName: "1",
      tableData: [],
      customersList: [],
      companyList: [],
      projectList: [],
      carsList: [],
      showprojectList: [],
      accountList: [],
      otherIncomeList: [],
      edit: false,
      visible: false,
      form: {
        create_time: "",
        code: "",
        customer_id: "",
        customer: "",
        abstract: "",
        total_price: "",
        unincome: "",
        remark: "",
        account_id: "",
        create_time: "",
        income_price: "",
        handler: "",
        income_remark: "",
        invoicing_price: "",
        taxrate: "",
        excluding_tax: "",
        tax_amount: "",
        invoice_type: "",
        invoice_date: "",
        invoice_num: "",
        invoice_code: "",
        invoice_content: "",
        invoice_remark: "",
      },
      rules: {
        account_id: [
          { required: true, message: "请选择收款账户", trigger: "blur" },
        ],
        income_price: [
          { required: true, message: "请输入收款金额", trigger: "blur" },
        ],
        create_time: [
          { required: true, message: "请选择收款日期", trigger: "blur" },
        ],
        invoicing_price: [
          { required: true, message: "请输入开票金额", trigger: "blur" },
        ],
        taxrate: [{ required: true, message: "请输入税率", trigger: "blur" }],
        invoice_type: [
          { required: true, message: "请输入发票类型", trigger: "blur" },
        ],
      },
      show_type: 0, // 1:收款 2:发票 3:编辑
      isEdit: false,
      searchContent: {
        project_name: "",
        unincome: "",
        uninvoice: "",
        payable: "",
        receivable: "",
        total: 0,
        page: 1,
        size: 10,
      },
      h: "",
      totalList: [],
      price1: 0,
      price2: 0,
      price3: 0,
    };
  },
  created() {
    openDB("car", "list").then(() => {
      this.getList();
      this.getOtherList();
    });
    this.h = document.documentElement.offsetHeight - 320;
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
  methods: {
    printListData() {
      let header = [
        { value: "issue_time", label: "出库时间" },
        { value: "type1", label: "配件总类别" },
        { value: "type2", label: "配件子类别" },
        { value: "name", label: "配件名称" },
        { value: "type3", label: "出库类型" },
        { value: "num", label: "出库数量" },
        { value: "units", label: "计量单位" },
        { value: "unit_price", label: "出库单价" },
        { value: "total_price", label: "总金额" },
        { value: "entry_name", label: "出库人" },
        { value: "receiving", label: "接受单位" },
        { value: "use_plate", label: "使用车辆" },
        { value: "remark", label: "备注" },
      ];
      let msg = {
        msg1: "出库明细表",
      };
      printData(msg, this.totalList, header);
    },
    resetList() {
      this.searchContent = {
        project_name: "",
        unincome: "",
        uninvoice: "",
        payable: "",
        receivable: "",
        total: 0,
        page: 1,
        size: 10,
      };
      this.getList();
    },
    getList() {
      getDataByKey("list", "收付款表").then((res) => {
        let result = (res?.data || []).filter((item) => {
          return item.item_type == 1;
        });
        let search = { ...this.searchContent };
        search.unincome = Number(search.unincome);
        search.uninvoice = Number(search.uninvoice);
        let { total, list, totalList } = searchTable(result, search, 1);
        this.totalList = totalList;
        this.searchContent.total = total;
        this.tableData = list;
        let price1 = 0;
        let price2 = 0;
        let price3 = 0;
        totalList.map((item) => {
          price1 = price1 + Number(item.total_price || 0);
          price2 = price2 + Number(item.income || 0);
          price3 = price3 + Number(item.invoicing || 0);
        });
        this.price1 = price1;
        this.price2 = price2;
        this.price3 = price3;
      });
      getDataByKey("list", "账户表").then((res) => {
        let result = res?.data || [];
        this.accountList = result.filter((item) => {
          return item.type == 1;
        });
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (
          rowIndex > 0 &&
          this.tableData[rowIndex].project_id ==
            this.tableData[rowIndex - 1].project_id
        ) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].project_id == row.project_id) {
              rowspan++;
            } else {
              break;
            }
          }
          return { rowspan: rowspan, colspan: 1 };
        }
      }
    },
    getOtherList() {
      getDataByKey("list", "客户表").then((res) => {
        this.customersList = res?.data || [];
      });
      getDataByKey("list", "公司信息表").then((res) => {
        this.companyList = res?.data || [];
      });
      getDataByKey("list", "项目表").then((res) => {
        this.projectList = res?.data || [];
      });

      getDataByKey("list", "出车记录表").then((res) => {
        this.carsList = res?.data || [];
      });
    },
    handleClose() {
      this.edit = false;
      this.visible = false;
      this.show_type = 0;
      this.form = {
        item_type: 1,
      };
    },
    change1(val) {
      this.form.customer = this.customersList.filter((item) => {
        return item.id == val;
      })[0].name;
    },
    change2(val) {
      this.form.company = this.companyList.filter((item) => {
        return item.id == val;
      })[0].name;
    },
    changeAccount(val) {
      let result = [...this.accountList];
      let choose = result.filter((item) => {
        return item.id == val;
      })[0];
      console.log(choose);
      this.form.account_name = choose.name;
      this.form.account_info = choose.info;
    },
    submitAdd() {
      if (this.show_type == 3) {
        this.handleClose();
      }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let data = { ...this.form };
          data.item_type = 1;
          let result;
          // 2：修改自身的数据
          if (this.show_type == 1) {
            // 收款
            result = {
              ...data,
              income: Number(data.income || 0) + Number(data.income_price || 0),
            };
            editDB("list", "收付款表", result).then(() => {
              let result1 = {
                id: new Date().getTime(),
                f_id: result.id,
                abstract: result.abstract,
                account_id: result.account_id,
                account_info: result.account_info,
                account_name: result.account_name,
                cars_id: result.cars_id,
                create_time: result.create_time,
                handler: result.handler,
                income_price: result.income_price,
                income_remark: result.income_remark,
                item_type: result.item_type,
                payable: result.payable,
                payable_id: result.payable_id,
                project_id: result.project_id,
                project_id: result.project_id,
                project_name: result.project_name,
                receivable: result.receivable,
                receivable_id: result.receivable_id,
                total_price: result.total_price,
                type: result.type,
              };
              // 1：在收款明细中新增
              changeDB("list", "收付款记录表", result1).then(() => {
                let account = this.accountList.filter((item) => {
                  return item.id == data.account_id;
                })[0];
                account.balance =
                  Number(account.balance || 0) + Number(data.income_price || 0);
                editDB("list", "账户表", account).then(() => {
                  this.getList();
                  this.$message.success("收款成功");
                  this.handleClose();
                });
              });
            });
          } else if (this.show_type == 2) {
            // 发票
            result = {
              ...data,
              invoicing:
                Number(data.invoicing || 0) + Number(data.invoicing_price || 0),
            };
            editDB("list", "收付款表", result).then(() => {
              let result1 = {
                id: new Date().getTime(),
                f_id: data.id,
                abstract: data.abstract,
                account_id: data.account_id,
                account_info: data.account_info,
                account_name: data.account_name,
                cars_id: data.cars_id,
                create_time: data.create_time,
                handler: data.handler,
                invoicing_price: data.invoicing_price,
                taxrate: data.taxrate,
                excluding_tax: data.excluding_tax,
                tax_amount: data.tax_amount,
                invoice_type: data.invoice_type,
                invoice_num: data.invoice_num,
                invoice_code: data.invoice_code,
                invoice_content: data.invoice_content,
                invoice_remark: data.invoice_remark,
                item_type: data.item_type,
                payable: data.payable,
                payable_id: data.payable_id,
                project_id: data.project_id,
                project_id: data.project_id,
                project_name: data.project_name,
                receivable: data.receivable,
                receivable_id: data.receivable_id,
                total_price: data.total_price,
                type: data.type,
              };
              // 1：在收款明细中新增
              changeDB("list", "发票登记表", result1).then(() => {
                this.getList();
                this.$message.success("开票成功");
                this.handleClose();
              });
            });
          }
        } else {
          return false;
        }
      });
    },
    // 新增一项
    addOne() {
      // this.tableData  //收付款表
      // this.projectList //项目信息表
      let project = this.tableData.map((item) => {
        return item.project_id;
      });
      let result = this.projectList.filter((item) => {
        if (!project.includes(item.id)) {
          return item;
        }
      });
      this.showprojectList = result;
      this.visible = true;
      this.show_type = 0;
    },
    // 删除一项

    delVisible(id) {
      deleteDB("list", "收付款表", id).then(() => {
        this.getList();
      });
    },
    // 收款登记
    collectionVisible(row) {
      this.show_type = 1;
      this.form = {
        ...row,
        account_id: "",
        create_time: "",
        income_price: "",
        handler: "",
        income_remark: "",
        invoicing_price: "",
        taxrate: "",
        excluding_tax: "",
        tax_amount: "",
        invoice_type: "",
        invoice_date: "",
        invoice_num: "",
        invoice_code: "",
        invoice_content: "",
        invoice_remark: "",
      };
      this.form.unincome =
        Number(this.form.total_price || 0) - Number(this.form.income || 0);
      this.form.uninvoicing =
        Number(this.form.total_price || 0) - Number(this.form.invoicing || 0);
      this.visible = true;
      console.log("123123");
    },
    changeIncome() {
      if (Number(this.form.income_price) > Number(this.form.unincome)) {
        this.$message.warning("收款金额不能大于欠收金额");
        this.form.income_price = "";
      }
    },
    changeInvoicing() {
      if (Number(this.form.invoicing_price) > Number(this.form.uninvoicing)) {
        this.$message.warning("开票金额不能大于未开票金额");
        this.form.invoicing_price = "";
      }
    },

    // 发票登记
    invoiceVisible(row) {
      this.show_type = 2;
      this.form = {
        ...row,
        account_id: "",
        create_time: "",
        income_price: "",
        handler: "",
        income_remark: "",
        invoicing_price: "",
        taxrate: "",
        excluding_tax: "",
        tax_amount: "",
        invoice_type: "",
        invoice_date: "",
        invoice_num: "",
        invoice_code: "",
        invoice_content: "",
        invoice_remark: "",
      };
      this.form.unincome =
        Number(this.form.total_price || 0) - Number(this.form.income || 0);
      this.form.uninvoicing =
        Number(this.form.total_price || 0) - Number(this.form.invoicing || 0);
      this.visible = true;
    },
    changeTaxrate(key) {
      if (key == 1) {
        this.changeInvoicing();
      }
      this.form.excluding_tax = Number(
        Number(this.form.invoicing_price) /
          (1 + Number(this.form.taxrate) / 100)
      ).toFixed(4);
      this.form.tax_amount = Number(
        Number(this.form.excluding_tax) * (Number(this.form.taxrate) / 100)
      ).toFixed(4);
    },
    // 编辑项目
    editVisible(row) {
      this.visible = true;
      this.show_type = 3;
      this.form = { ...row };
    },
    handleSizeChange(val) {
      this.searchContent.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchContent.page = val;
      this.getList();
    },
    timestampToTime(row) {
      var date = new Date(Number(row.id));
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var d = date.getDate();
      return y + "年" + m + "月" + d + "日";
    },
    tableRowClassName({ row, rowIndex }) {
      let flag = Number(row.total_price || 0) - Number(row.income || 0) > 0;
      let flag1 = Number(row.total_price || 0) - Number(row.invoicing || 0) > 0;
      if (flag || flag1) {
        return "warning-row";
      } else if (row.type == 1) {
        return "";
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.el-form {
  .el-select,
  .el-input,
  .el-date-editor {
    width: 160px;
  }
  .el-textarea {
    width: 700px;
  }
  .el-range-editor {
    width: 290px;
  }
}
.pro_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
<style>
.el-table .warning-row {
  background: #fdf6ec;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
